<!DOCTYPE html>
<html lang="en">

<head>
    <title>Jina AI Deep Search</title>
    <meta charset="utf-8">
    <meta name="theme-color" content="#009191">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="title" content="Jina AI Deep Search">
    <meta name="description" content="AI deep search: read, reason, search until best answer found.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://search.jina.ai">
    <meta property="og:title" content="Jina AI Deep Search">
    <meta property="og:description" content="AI deep search: read, reason, search until best answer found.">
    <meta property="og:image" content="https://search.jina.ai/banner.png">
    <meta property="twitter:site" content="@JinaAI_">
    <meta name="twitter:creator" content="@JinaAI_">
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://search.jina.ai">
    <meta property="twitter:title" content="Jina AI Deep Search">
    <meta property="twitter:description" content="AI deep search: read, reason, search until best answer found.">
    <meta property="twitter:image" content="https://search.jina.ai/banner.png">
    <meta name="viewport" content="initial-scale=1,maximum-scale=5,minimum-scale=1,width=device-width">
    <script defer src="third-party/markdown-it.min.js"></script>
    <script defer src="third-party/markdown-it-footnote.min.js"></script>
    <script defer src="third-party/mathjax.config.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" type="image/ico" href="favicon.ico">
    <link rel="canonical" href="https://search.jina.ai" />
    <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "WebApplication",
            "name": "Jina AI Deep Search",
            "description": "AI deep search: read, reason, search until best answer found.",
            "url": "https://search.jina.ai"
        }
    </script>
</head>

<body>
    <div id="chat-app" class="empty-chat">
        <div id="settings-container">
            <div class="buttons-group">
                <button id="settings-button" aria-label="Settings" class="tooltip-container">
                    <svg class="action-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" aria-hidden="true">
                        <circle cx="12" cy="12" r="3"></circle>
                        <path
                            d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
                        </path>
                    </svg>
                    <span class="sr-only" data-label="buttons.settings">Settings</span>
                    <span class="tooltip" data-label="tooltips.settings">Settings</span>
                </button>
                <button id="new-chat-button" aria-label="New Chat" class="icon-button tooltip-container">
                    <svg class="action-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <line x1="12" y1="5" x2="12" y2="19"></line>
                        <line x1="5" y1="12" x2="19" y2="12"></line>
                    </svg>
                    <span data-label="buttons.new">New</span>
                    <span class="tooltip" data-label="tooltips.new">Clear and start a new conversation</span>
                </button>
                <div id="recent-sessions-container" class="tooltip-container">
                    <button id="recent-sessions-button" aria-label="Recent Sessions" class="icon-button">
                        <svg class="chevron-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                            stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="6 9 12 15 18 9"></polyline>
                        </svg>
                        <span class="tooltip" data-label="tooltips.recent">View recent conversations</span>
                    </button>
                    <div id="sessions-dropdown">
                        <div id="sessions-header">
                            <span data-label="labels.recent">Recent</span>
                            <button id="clear-all-sessions">
                                <span data-label="buttons.clearAll">Clear All</span>
                            </button>
                        </div>
                        <ul id="sessions-list">
                            <!-- Sessions will be dynamically added here -->
                        </ul>
                    </div>
                </div>
            </div>
            <div class="buttons-group">
                <button id="toggle-api-key" class="icon-button tooltip-container"
                    aria-label="Upgrade to higher rate limit">
                    <svg class="action-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" aria-hidden="true">
                        <path
                            d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4">
                        </path>
                    </svg>
                    <span data-label="buttons.addKey">Key</span>
                    <span class="tooltip" data-label="tooltips.upgrade">Upgrade to higher rate limit</span>
                </button>
                <button id="theme-toggle-button" class="tooltip-container" aria-label="Toggle theme">
                    <svg id="theme-icon" class="action-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" aria-hidden="true">
                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                    </svg>
                    <span class="sr-only">Toggle theme</span>
                    <span class="tooltip" data-label="tooltips.theme">Toggle theme</span>
                </button>
            </div>
        </div>

        <main id="main-container">
            <div id="chat-container"></div>
        </main>

        <form id="input-area">
            <svg id="logo" viewBox="0 0 240 100" xmlns="http://www.w3.org/2000/svg">
                <circle fill="#E85F5F" cx="16" cy="84" r="16" />
                <circle fill="#F9C964" cx="100" cy="16" r="16" />
                <path fill="#008F8F"
                    d="M64 36c2.2 0 4 1.8 4 4v28c0 16.6-13.4 30-30 30h-2V68 40c0-2.2 1.8-4 4-4h24zm48 0c2.2 0 4 1.8 4 4v40c0 2.2-1.8 4-4 4H88c-2.2 0-4-1.8-4-4V40c0-2.2 1.8-4 4-4h24zm36 0h2c16 0 28 12 28 28v16c0 2.2-1.8 4-4 4h-38c-2.2 0-4-1.8-4-4V40c0-2.2 1.8-4 4-4h12zm64 48c-12.8-0.8-22-11.2-22-24 0-13.2 10.8-24 24-24 12.8 0 23.2 9.2 24 22v22c0 2.2-1.8 4-4 4h-22z" />
            </svg>
            <div id="file-preview-container"></div>
            <div id="message-input-container">
                <textarea type="search" id="message-input" maxlength="2000" autocomplete="off" autocapitalize="off"
                    spellcheck="false" data-form-type="other" placeholder="Type your question here"
                    data-placeholder="placeholders.messageInput" aria-label="Search query input" enterkeyhint="search"
                    rows="1"></textarea>
                <div id="search-icon-container">
                    <svg id="default-search-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" class="feather feather-search">
                        <circle cx="11" cy="11" r="8"></circle>
                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                    </svg>
                    <svg id="chat-search-icon" viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg">
                        <g transform="translate(49, 56)">
                            <circle fill="#E85F5F" cx="52" cy="155" r="52" />
                            <path fill="#008F8F"
                                d="M207 0c7 0 13 6 13 13v90c0 54-43 98-97 98h-6V13c0-7 6-13 13-13h77z" />
                        </g>
                    </svg>
                </div>
                <button type="button" id="file-upload-button" class="tooltip-container" aria-label="Upload files">
                    <svg class="action-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path
                            d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48">
                        </path>
                    </svg>
                    <span class="sr-only">Upload files</span>
                    <span class="tooltip" data-label="tooltips.upload">Upload files</span>
                </button>
                <button type="button" id="stop-message-button" class="tooltip-container" aria-label="Stop">
                    <svg id="stop-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" class="action-icon feather feather-stop-circle">
                        <circle cx="12" cy="12" r="10"></circle>
                        <rect x="9" y="9" width="6" height="6"></rect>
                    </svg>
                    <span class="sr-only">Stop</span>
                    <span class="tooltip" data-label="tooltips.stop">Stop</span>
                </button>
                <div id="file-drop-area"></div>
            </div>
            <div id="input-error-message"></div>
            <input type="file" id="file-input" multiple
                accept=".pdf,.txt,.csv,image/jpeg,image/png,image/WEBP,image/gif" style="display: none;">
            <button type="submit" id="send-button" aria-label="Deep Search" data-label="buttons.send">Deep
                Search</button>
        </form>
    </div>

    <!-- Add the dialog HTML -->
    <div class="dialog-overlay" id="api-key-dialog" role="dialog" aria-labelledby="api-key-dialog-title"
        aria-modal="true">
        <div class="dialog">
            <div class="dialog-header">
                <span class="dialog-title" id="api-key-dialog-title" data-label="dialogs.apiKey.title">Upgrade to Higher
                    Rate Limit</span>
                <button class="dialog-close" aria-label="Close dialog">&times;</button>
            </div>
            <div class="dialog-content">
                <p id="free-user-rpm" data-html="dialogs.apiKey.freeUserRpm">You can send <b>3 requests per minute</b>.
                </p>
                <p class="dialog-description" data-label="dialogs.apiKey.description">Use your Jina API key to access a
                    higher rate limit. You can get a free API key and learn more about rate limits on our website.</p>
                <div style="position: relative; display: flex; align-items: center; gap: 6px; margin-bottom: 12px;">

                    <input type="password" id="api-key-input" data-placeholder="placeholders.apiKeyInput"
                        placeholder="Enter your API key" autocomplete="new-password" aria-label="API key input"
                        style="flex: 1 1 auto;">
                    <button id="open-jina-site" type="button" aria-label="Open Jina.ai website"
                        class="action-icon link-button">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="feather feather-external-link">
                            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                            <polyline points="15 3 21 3 21 9"></polyline>
                            <line x1="10" y1="14" x2="21" y2="3"></line>
                        </svg>
                    </button>
                </div>

                <ul class="help-list">
                    <li data-html="dialogs.help.list.2">Add to your browser's search engines via
                        <code>https://search.jina.ai/?q={YOUR_QUERY}</code>
                    </li>
                    <li data-html="dialogs.help.list.3">This <i>is</i> our product, not a POC or hype-chasing gimmick.
                        Interested in on-prem deploy? Contact
                        us.
                    </li>
                </ul>
            </div>
            <div class="dialog-footer">
                <a id="get-api-key" href="https://jina.ai/deepsearch" target="_blank">
                    <button class="link-button" aria-label="Get API Key" data-label="buttons.getKey">Get API
                        Key</button>
                </a>
                <a href="https://jina.ai/contact-sales" target="_blank">
                    <button id="contact-us" class="icon-button link-button" aria-label="Contact Jina AI sales">
                        <svg class="action-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                            stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <line x1="22" y1="2" x2="11" y2="13"></line>
                            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                        </svg>
                        <span data-label="buttons.contactUs">Contact Us</span>
                    </button>
                </a>
                <button id="save-api-key" aria-label="Save API key" data-label="buttons.saveKey">Save</button>
            </div>
        </div>
    </div>
    <!-- Settings dialog -->
    <div class="dialog-overlay" id="settings-dialog" role="dialog" aria-labelledby="settings-dialog-title"
        aria-modal="true">
        <div class="dialog">
            <div class="dialog-header">
                <span class="dialog-title" id="settings-dialog-title"
                    data-label="dialogs.settings.title">Settings</span>
                <button class="dialog-close" aria-label="Close settings dialog">&times;</button>
            </div>
            <div class="dialog-content">
                <div class="settings-option">
                    <label class="toggle-switch">
                        <input type="checkbox" id="chirp-on-done-toggle-input" checked>
                        <span class="toggle-slider"></span>
                        <span class="toggle-label" data-label="dialogs.settings.chirpOnDone">Chirp on done</span>
                    </label>
                </div>
                <div class="settings-option">
                    <label class="toggle-switch">
                        <input type="checkbox" id="arxiv-research-toggle-input">
                        <span class="toggle-slider"></span>
                        <span class="toggle-label" data-label="dialogs.settings.arxivResearch">arXiv Research</span>
                    </label>
                </div>
                <div class="settings-option">
                    <label class="toggle-switch">
                        <input type="checkbox" id="always-search-toggle-input">
                        <span class="toggle-slider"></span>
                        <span class="toggle-label" data-label="dialogs.settings.alwaysSearch">Always search</span>
                    </label>
                </div>
                <div class="settings-option">
                    <label class="toggle-switch">
                        <input type="checkbox" id="include-images-toggle-input">
                        <span class="toggle-slider"></span>
                        <span class="toggle-label" data-label="dialogs.settings.includeImages">Include images</span>
                    </label>
                </div>
                <div class="settings-option" style="display: none;">
                    <label class="toggle-switch">
                        <input type="checkbox" id="theme-toggle-input">
                        <span class="toggle-slider"></span>
                        <span class="toggle-label" data-label="dialogs.settings.darkTheme">Use dark theme</span>
                    </label>
                </div>
                <div class="settings-section">
                    <h3 class="settings-section-title" data-label="dialogs.settings.reasoningSettings">Reasoning
                        Settings</h3>
                    <div class="settings-option">
                        <label for="reasoning-effort-select" class="settings-label"
                            data-label="dialogs.settings.reasoningEffort">Reasoning effort</label>
                        <select id="reasoning-effort-select" class="settings-select">
                            <option value="low" data-label="dialogs.settings.reasoningLevels.low">Low</option>
                            <option value="medium" data-label="dialogs.settings.reasoningLevels.medium">Medium</option>
                            <option value="high" data-label="dialogs.settings.reasoningLevels.high">High</option>
                        </select>
                    </div>
                    <div class="settings-option">
                        <label for="team-size-select" class="settings-label"
                            data-label="dialogs.settings.teamSize">Agentic team size</label>
                        <select id="team-size-select" class="settings-select">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                        </select>
                    </div>
                </div>
                <div class="settings-section">
                    <h3 class="settings-section-title" data-label="dialogs.settings.languageSettings">Language Settings
                    </h3>
                    <div class="settings-option">
                        <label for="language-select" class="settings-label" data-label="dialogs.settings.language">UI
                            Language</label>
                        <select id="language-select" class="settings-select">
                            <option value="en">English</option>
                            <option value="zh-CN">中文(简体)</option>
                            <option value="zh-TW">中文(繁體)</option>
                            <option value="jp">日本語</option>
                            <option value="ko">한국어</option>
                            <option value="fr">Français</option>
                            <option value="de">Deutsch</option>
                        </select>
                    </div>
                    <div class="settings-option">
                        <label for="answer-language-select" class="settings-label"
                            data-label="dialogs.settings.answerLanguage">Answer/Think Language</label>
                        <select id="answer-language-select" class="settings-select">
                            <option value="unset" data-label="dialogs.settings.unset">Unset</option>
                            <option value="en">English</option>
                            <option value="zh-CN">中文(简体)</option>
                            <option value="zh-TW">中文(繁體)</option>
                            <option value="jp">日本語</option>
                            <option value="ko">한국어</option>
                            <option value="fr">Français</option>
                            <option value="de">Deutsch</option>
                        </select>
                    </div>
                    <div class="settings-option">
                        <label for="search-language-select" class="settings-label"
                            data-label="dialogs.settings.searchLanguage">Search Query Language</label>
                        <select id="search-language-select" class="settings-select">
                            <option value="unset" data-label="dialogs.settings.unset">Unset</option>
                            <option value="en">English</option>
                            <option value="zh-CN">中文(简体)</option>
                            <option value="zh-TW">中文(繁體)</option>
                            <option value="jp">日本語</option>
                            <option value="ko">한국어</option>
                            <option value="fr">Français</option>
                            <option value="de">Deutsch</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Delete session dialog -->
    <div class="dialog-overlay" id="delete-session-dialog" role="dialog" aria-labelledby="delete-session-dialog-title"
        aria-modal="true">
        <div class="dialog">
            <div class="dialog-header">
                <span class="dialog-title" id="delete-session-dialog-title"
                    data-label="dialogs.deleteSession.title">Delete session?</span>
                <button class="dialog-close" aria-label="Close dialog">&times;</button>
            </div>
            <div class="dialog-content">
                <p id="free-user-rpm" data-html="dialogs.deleteSession.description">Are you sure to delete the session?
                </p>
            </div>
            <div class="dialog-footer">
                <button class="delete" aria-label="Delete" data-label="buttons.delete">Delete</button>
            </div>
        </div>
    </div>
    <!-- Delete all sessions dialog -->
    <div class="dialog-overlay" id="delete-all-sessions-dialog" role="dialog" aria-labelledby="delete-all-dialog-title"
        aria-modal="true">
        <div class="dialog">
            <div class="dialog-header">
                <span class="dialog-title" id="delete-all-dialog-title"
                    data-label="dialogs.deleteAllSessions.title">Delete all sessions?</span>
                <button class="dialog-close" aria-label="Close dialog">&times;</button>
            </div>
            <div class="dialog-content">
                <p id="free-user-rpm" data-html="dialogs.deleteAllSessions.description">Are you sure to delete all the
                    sessions?</p>
            </div>
            <div class="dialog-footer">
                <button class="delete" aria-label="Delete" data-label="buttons.delete">Delete</button>
            </div>
        </div>
    </div>
    <!-- Navigation URLs dialog -->
    <div class="dialog-overlay" id="navigation-dialog" role="dialog" aria-labelledby="navigation-title"
        aria-modal="true">
        <div class="dialog">
            <div class="dialog-header">
                <span class="dialog-title" id="navigation-dialog-title" data-label="dialogs.navigation.title">The
                    navigating URLs</span>
                <button class="dialog-close" aria-label="Close dialog">&times;</button>
            </div>
            <div class="dialog-content">
                <div id="navigation-urls"></div>
            </div>
            <div class="dialog-footer">
            </div>
        </div>
    </div>
    </div>
    <!-- Image references dialog -->
    <div class="dialog-overlay" id="image-references-dialog" role="dialog"
        aria-labelledby="image-references-dialog-title" aria-modal="true">
        <div class="dialog">
            <div class="dialog-header">
                <span class="dialog-title" id="image-references-title" data-label="dialogs.imageReferences.title">Image
                    preview</span>
                <button class="dialog-close" aria-label="Close image references dialog">&times;</button>
            </div>
            <div class="dialog-content">
                <img id="selected-image-reference" src="" alt="Image reference" />
            </div>
        </div>
    </div>

    <script async src="preload.js"></script>
    <script defer src="hljs.js"></script>
    <script defer src="utils.js"></script>
    <script defer src="app.js"></script>

</body>

</html>